I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The user will use a overflow: auto scroll to scroll to see the rest of the divs.
illustration:
# = === = = === ===
# = == = =
# == ==================
# =========
if an "=" is a floating fixed-height div, how do I make it so it doesn't wrap when it is longer than the parent?
This is for a similar app as a TV guide you see on your cable/sat tv.
The channels remain on the right, but you can "scroll" horizontally to see what's playing later on in the day. You only see 2 hours at a time, but you can scroll to see the full 24 hours if you wanted to.
Here's what my css
Expand|Select|Wrap|Line Numbers
- .eventCont {
- position: relative;
- width: 820px;
- height: 600px;
- overflow-x: auto;
- overflow-y: hidden;
- }
- .event {
- position: relative;
- float: left;
- width: 200px;
- height: 74px;
- overflow: hidden;
- border-left: 2px solid white;
- border-bottom: 1px solid white;
- }
I've tried many things among:
white-space: nowrap; display + float + position combinations etc. with
no-avail.
The difficult part is, they all have to be in the same div so that there's only one scroll bar, otherwise I could put each row in a <td>.
Thanks,
Dan